<template>
  <div class="container">
    <uv-loading-page :loading="loading" loading-text="加载中..." font-size="24rpx"></uv-loading-page>

    <view class="banner">
      <image @load="handleLoad" src="https://oss.seenlove.com/images/e452750a55fef2c7ecdebf37224ae4d4.png" mode="widthFix" />
    </view>

    <div class="content">
      <div class="main">
        <div class="box">
          <div class="title">前言</div>
          <div class="desc">{{counter.ycMpParams.basicInfo.preface}}</div>
        </div>

        <div class="box">
          <div class="title">公司介绍</div>
          <div class="desc">
            {{counter.ycMpParams.basicInfo.companyIntro}}
          </div>
        </div>

        <div class="box">
          <div class="title">教学环境</div>
          <div class="environment">
            <div class="" v-for="(item,index) in counter.ycMpParams.basicInfo.campusEnvironment" :key="index">
              <image :src="item" mode="widthFix" />
            </div>
          </div>
        </div>

        <div class="box">
          <div class="title">我校动态</div>
          <div class="imageList">
            <div class="images">
              <div class="image shrink" v-for="(item, index) in counter.ycMpParams.basicInfo.dynamic" :key="index">
                <image :src="item.url" mode="widthFix" />
                <div class="intro fz12">{{item.title}}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <uv-back-top :scroll-top="scrollTop"></uv-back-top>
  </div>
</template>

<script setup lang="ts">
const { proxy } = getCurrentInstance();
const instance = getCurrentInstance();
import useCounterStore from "@/stores/counter";
const counter = useCounterStore();

let loading = ref(true);
let scrollTop = ref(0);

onPageScroll((e) => {
  scrollTop.value = e.scrollTop;
});

function handleLoad() {
  loading.value = false;
}
</script>



<style lang="scss" scoped>
.container {
  min-height: 100vh;
  background-color: #f8f8f8;
  .content {
    padding: 15px;
    .box {
      margin-bottom: 20px;
      .title {
        font-weight: bold;
        font-size: 16px;
        margin-bottom: 15px;
        position: relative;
      }
      .title:after {
        content: " ";
        width: 4px;
        height: 20px;
        background: #f66604;
        position: absolute;
        left: -1vw;
        transform: translateX(-50%);
      }
      .desc {
        font-family: "Microsoft YaHei", "微软雅黑";
        line-height: 25px;
        text-align: justify;
        text-indent: 2em;
        font-size: 14px;
      }
    }
    .environment {
      image {
        width: 100%;
        display: block;
      }
    }
    .imageList {
      overflow: hidden;
      .images {
        animation: slides 20s linear infinite;
        .image {
          width: 100%;
          position: relative;
          margin-bottom: 10px;
          image {
            width: 100%;
            display: block;
          }
          .intro {
            position: absolute;
            width: 100%;
            bottom: 0;
            background-color: rgba(255, 255, 255, 0.5);
            padding: 5px 10px;
            color: #303030;
          }
        }
      }
    }
  }
}
</style>



